<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Car Route Configuration</title>
    <style>
        .segment {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Car Route Configuration</h1>
    <label for="segmentCount">Number of segments:</label>
    <input type="number" id="segmentCount" min="1" value="1">
    <button onclick="generateSegments()">Generate Segments</button>
    <div id="segmentsContainer"></div>
    <button onclick="submitConfiguration()">Submit Configuration</button>

    <script>
        function generateSegments() {
            const segmentCount = document.getElementById('segmentCount').value;
            const container = document.getElementById('segmentsContainer');
            container.innerHTML = '';

            for (let i = 0; i < segmentCount; i++) {
                const segmentDiv = document.createElement('div');
                segmentDiv.classList.add('segment');
                segmentDiv.innerHTML = `
                    <h3>Segment ${i + 1}</h3>
                    <label for="speed${i}">Speed:</label>
                    <input type="number" id="speed${i}" min="0" value="0"> m/s
                    <br>
                    <label for="direction${i}">Direction:</label>
                    <select id="direction${i}">
                        <option value="straight">Straight</option>
                        <option value="left">Left Turn</option>
                        <option value="right">Right Turn</option>
                        <option value="u-turn">U-turn</option>
                    </select>
                `;
                container.appendChild(segmentDiv);
            }
        }

        function submitConfiguration() {
            const segmentCount = document.getElementById('segmentCount').value;
            const configuration = [];

            for (let i = 0; i < segmentCount; i++) {
                const speed = document.getElementById(`speed${i}`).value;
                const direction = document.getElementById(`direction${i}`).value;

                configuration.push({
                    segment: i + 1,
                    speed: speed,
                    direction: direction
                });
            }

            console.log('Car Route Configuration:', configuration);

            fetch('http://localhost:3000/submit-configuration', { // Node.js 服务器地址
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(configuration)
            })
            .then(response => response.text()) // 处理服务器响应
            .then(data => {
                console.log('Success:', data);
                alert('Configuration submitted successfully!');
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>
